<template>
	<div id="index">
		<a-layout>
			<a-config-provider :locale="language">
				<a-layout-header>
					<div id="topbar">
						<topBar @loginVisibleShow="getloginData" @registerVisibleShow="getregisterData"
							@getLoginUserInfo="getLoginData" :isSearchPage="false" :refrushAvatar="refrushAvatar"
							@getRefrushUserInfo="getRefrushUserInfo">
						</topBar>
					</div>
				</a-layout-header>
				<a-layout-header>
					<div id="split-images">
						<a-image width="100%" height="100%" :src="$user.imgUrl+'split.png'" title='' description=''
							style="text-align: right;" :preview="false" draggable="false">
						</a-image>
					</div>
					<div id="typebar" v-if="userInfo.data">
						<a-row id="typebar-leftnav" justify="space-between" align="center">
							<a-col :span="7">
								<div id="image-shadow">
									<a-upload name="file"
									 :auto-upload="true" 
									 :custom-request="uploadAvatar"
									 :show-file-list="false"
									ref="uploadRef">
										<template #upload-button>
											<a-avatar trigger-type="mask" :size="83">
												<img alt="avatar"
													:src="userInfo.data.avatar" />
												<template #trigger-icon>
													<IconEdit />
												</template>
											</a-avatar>
										</template>
									</a-upload>
								</div>
							</a-col>
							<a-col :span="17">
								<a-space direction="vertical" fill>
									<a-typography style="margin-top: -9%;">
										<a-typography-title style="font-weight: bold;font-size: 25px;
													height: auto;margin-bottom: 5%;text-align: left;
													color: white;width: 290px;" ellipsis>
											{{userInfo.data.nickName}}
										</a-typography-title>
										<a-typography-paragraph style="font-size: 13px;height: 38px;text-align: left;
										width: 640px;" :ellipsis="{
													        rows: 2,
													        expandable: true,
													        showTooltip: {
													          props: {
													            style: { maxWidth: `500px` }
													          }
													        }
													      }">
											个人签名:{{userInfo.data.sign}}
										</a-typography-paragraph>
									</a-typography>
								</a-space>
							</a-col>
						</a-row>
						<a-row id="typebar-rightnav" justify="space-between" align="center">
							<a-space :size="10" style="padding-top: 3px;font-size: 15px;color: white;">
								<span>关注:</span>
								<span class="font-bold">{{userInfo.data.focus}}</span>
								<span>文章:</span>
								<span class="font-bold">{{userInfo.data.article}}</span>
								<span>点赞:</span>
								<span class="font-bold">{{userInfo.data.good}}</span>
							</a-space>
							<a-col style="margin-top: 7%;" v-if="currentMenuItem == 1">
								我的粉丝（{{fansTotal}}）:
								<a-avatar-group :size="34" :max-count="2">
								      <a-avatar :size="34" v-for="(fanItem,fanIndex) in fansList.data" :key="fanIndex">
								      	<img alt="avatar" style="width: 100%;height: 100%;font-size: 10px;"
								      		:src="fanItem.avatar" />
								      </a-avatar>
								</a-avatar-group>
							</a-col>
						</a-row>
					</div>
				</a-layout-header>
				<a-layout-header>
					<a-menu mode="horizontal" :default-selected-keys="currentMenuItem" @menu-item-click="getMenuItem"
						style="text-align: left;margin-left: 12%;width: 75vw;" :key="refrush">
						<a-menu-item :key="item.Number" v-for="item in typeMenuItem">
							<span>{{item.tabName}}</span>
						</a-menu-item>
					</a-menu>
				</a-layout-header>
				<a-layout-content>
					<div id="content">
						<router-view @getFansData="loadingFansList" @getTab="getTabData" :refrushAvatar="refrushAvatar">
						</router-view>
					</div>
				</a-layout-content>
				<a-layout-footer>
					<div id="footer">
						<a-back-top :visible-height="10" />
					</div>
				</a-layout-footer>
			</a-config-provider>
		</a-layout>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		provide,
		watch,
		nextTick
	} from 'vue';

	//国际化组件
	import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
	import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';

	import topBar from '@/components/index/topBar.vue';

	import apiUrl from '@/constant/user/apiUrl.js';
	import indexApi from '@/module/index/api/index.js';
	import userApi from '@/module/user/api/index.js';

	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();

	let {
		proxy
	} = getCurrentInstance();

	let language = ref(zhCN);

	let loginformVisible = ref(false);
	let registerformVisible = ref(false);

	let currentMenuItem = reactive(['1']);
	let typeMenuItem = reactive([{
		tabName: '我的关注',
		Number: '1'
	}, {
		tabName: '我的收藏',
		Number: '2'
	}, {
		tabName: '修改个人资料',
		Number: '3'
	},{
		tabName: '待支付订单',
		Number: '4'
	}]);

	let userInfo = reactive({});
	let fansList = reactive({});
	let fansTotal = ref(0);
	let tab = ref(0);
	let refrush = ref(0);
	let refrushAvatar = ref(false);
	let uploadStatus = reactive({});
	const apiUrlUserInfo =
		import.meta.env.VITE_API_URL_INFO;
	import baseUrl from '@/constant/user/apiUrl.js';
	
	async function uploadAvatar(option){
		let formData = new FormData();
		formData.append('file',option.fileItem.file);
		console.log('file',option.fileItem.file)
		console.log('fileName:',formData.get('file'))
		uploadStatus.resp = await userApi.uploadUserAvatar(userInfo.data.uid,formData);
		console.log('uploadStatus',uploadStatus.resp);
		if(uploadStatus.resp.flag == true){
			proxy.$message.success('头像修改成功');
			refrushAvatar.value = !refrushAvatar.value;
		}
		else if(uploadStatus.resp.flag == false){
			proxy.$message.error('头像修改失败');
		}
	}
	
	function getRefrushUserInfo(data){
		userInfo.data = data;
	}
	
	function successUpload(fileItem){
		console.log('fileItem',fileItem);
	}
	
	function loadingFansList(data){
		fansList.data = data;
		fansTotal.value = data.length;
		console.log('fansList.data',fansList.data);
	}
	
	function getTabData(data){
		tab.value = data;
		watch(()=> tab.value,(newValue,preValue)=>{
			tabTextChange();
			console.log('currentMenuItem',currentMenuItem);
			refrush.value++;
		});
	}

	function changeLanguage() {
		console.log('当前语言', language.value);
		if (language.value.locale != '' && language.value.locale != null && language.value.locale == 'zh-CN') {
			language.value = enUS;

			proxy.$i18n.locale = 'en';
		} else {
			language.value = zhCN;

			proxy.$i18n.locale = 'zh';
		}
		console.log('切换后语言', language.value);
	}

	function changeThemeColor() {
		if (document.body.getAttribute('arco-theme') == 'dark') {
			document.body.removeAttribute('arco-theme');
			document.documentElement.style.setProperty('--color-content', '#f4f4f4');
			document.documentElement.style.setProperty('--color-content-a', '#4c4c4c');
			document.documentElement.style.setProperty('--color-font', '#4c4c4c');

		} else {
			document.body.setAttribute('arco-theme', 'dark');
			document.documentElement.style.setProperty('--color-content', '#4c4c4c');
			document.documentElement.style.setProperty('--color-content-a', '#f4f4f4');
			document.documentElement.style.setProperty('--color-font', '#f4f4f4');
		}
	}

	function getMenuItem(key) {
		console.log('keyItem', key.toString());
		if (currentMenuItem.length != 0) {
			currentMenuItem.splice(0, currentMenuItem.length);
		}
		currentMenuItem.push(key.toString());
		console.log('currentMenuItem', currentMenuItem);
		switch (currentMenuItem[0]) {
			case '1':
				router.push({
					name: 'follow'
				});
				break;
			case '2':
				router.push({
					name: 'save'
				});
				break;
			case '3':
				router.push({
					name: 'self'
				});
				break;
			case '4':
				router.push({
					name: 'waitPay'
				});
				break;
		}
	}

	function tabTextChange() {
		console.log('tab', route.meta.tab);
		if (currentMenuItem.length != 0) {
			currentMenuItem.splice(0, currentMenuItem.length);
		}
		if (route.meta.tab) {
			currentMenuItem.push(route.meta.tab);
		}
	}

	function getloginData(data) {
		loginformVisible.value = data;
		console.log('loginVisable', data);
	}

	function getregisterData(data) {
		registerformVisible.value = data;
		console.log('registerVisable', data);
	}

	provide('getUserInfo',userInfo);
	function getLoginData(data) {
		console.log('user', data);
		userInfo.data = data;
	}

	let addCartGoodStatus = ref(false);
	provide('flushShoppingCart', addCartGoodStatus);
	//获取添加商品的状态
	function getCartGood(data) {
		console.log('status', data);
		addCartGoodStatus.value = data;
	}

	onMounted(() => {
		console.log('user的onMounted执行了');
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		tabTextChange();
		console.log('env',
			import.meta.env);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/user/css/index.less';
</style>
